<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商户明细</el-breadcrumb-item>
				<el-breadcrumb-item>提现审核</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box">
			<el-form ref="editForm" :model="postModel" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="店铺名称">
								{{model.merchant.title}}
							</el-form-item>
							<el-form-item label="账户余额">
								{{model.merchant.amount}} 元
							</el-form-item>
							<el-form-item label="不可用金额">
								{{model.merchant.frozenAmount}} 元
							</el-form-item>
							<el-form-item label="转账类型">
								{{model.payType}}
							</el-form-item>
							<el-form-item label="收款人姓名">
								{{model.fullName}}
							</el-form-item>
							<el-form-item label="银行名称" v-if="model.bankName">
								{{model.bankName}}
							</el-form-item>
							<el-form-item label="收款账号">
								{{model.accountNo}}
							</el-form-item>
							<el-form-item label="提现金额">
								{{model.transferAmount}} 元
							</el-form-item>
							<el-form-item label="留言备注">
								{{model.addRemark}}
							</el-form-item>
							<el-form-item label="收款二维码" v-if="model.qrCode">
								<div class="preview-box">
									<el-image :src="$api.loadFile(model.qrCode)" :preview-src-list="[$api.loadFile(model.qrCode)]"></el-image>
								</div>
							</el-form-item>
							
							<template v-if="model.handleStatus==3">
								<el-form-item label="审核意见">
									{{model.handleRemark}}
								</el-form-item>
								<el-form-item label="审核人">
									{{model.handleBy}}
								</el-form-item>
								<el-form-item label="到账时间">
									{{model.payTime}}
								</el-form-item>
								<el-form-item label="转账凭证">
									<div class="preview-box">
										<el-image :src="$api.loadFile(model.payImgUrl)" :preview-src-list="[$api.loadFile(model.payImgUrl)]"></el-image>
									</div>
								</el-form-item>
							</template>
							
							<template v-if="model.handleStatus==1">
								<el-form-item prop="handleStatus" label="处理结果">
									<el-radio-group v-model="postModel.handleStatus">
										<el-radio :label="2">通过审核</el-radio>
										<el-radio :label="4">不通过</el-radio>
									</el-radio-group>
								</el-form-item>
							</template>
							
							<template v-if="model.handleStatus==2">
								<el-form-item prop="handleStatus" label="处理结果">
									<el-radio-group v-model="postModel.handleStatus">
										<el-radio :label="3">转账汇款</el-radio>
										<el-radio :label="4">撤回审核</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="转账凭证" v-if="postModel.handleStatus==3">
									<dt-upload v-model="postModel.payImgUrl"></dt-upload>
								</el-form-item>
								<el-form-item prop="payTime" label="到账时间" v-if="postModel.handleStatus==3">
									<el-date-picker v-model="postModel.payTime"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="到账时间">
									</el-date-picker>
								</el-form-item>
							</template>
							
							<el-form-item label="审核意见" v-if="model.handleStatus<3">
								<el-input type="textarea" :rows="3" v-model="postModel.handleRemark" maxlength="512" show-word-limit placeholder="必填，512个字符内"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm" v-if="model.handleStatus<3">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				model: {
					id: null,
					merchantId: null,
					payinfoId: null,
					payType: null,
					fullName: null,
					bankName: null,
					accountNo: null,
					qrCode: null,
					balanceAmount: null,
					transferAmount: null,
					addRemark: null,
					addTime: null,
					handleStatus: null,
					handleBy: null,
					handleTime: null,
					handleRemark: null,
					payImgUrl: null,
					payTime: null,
					merchant: []
				},
				postModel: {
					handleStatus: null,
					handleRemark: null,
					payImgUrl: null,
					payTime: null,
				},
				rules: {
					handleStatus: [
						{ required: true, message: '请选择处理结果', trigger: 'change' }
					],
					payTime: [
						{ required: true, message: '请选择到账时间', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (!_this.id) {
					_this.$alert('参数有误，找不到提现记录。', '错误提示', {
						confirmButtonText: '确定',
						callback: action => {
							_this.$common.linkUrl('/merchant/cash/list');
						}
					});
					return false;
				}
				//查找提现记录
				_this.$api.request({
					url: '/admin/merchant/cash/' + _this.id,
					loading: true,
					success(res) {
						//赋值给model
						Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						Object.keys(_this.postModel).forEach(key => { _this.postModel[key] = res.data[key] });
						//将审核状态赋值NULL
						_this.postModel.handleStatus = null;
						console.log(res.data)
					}
				});
			},
			//提交订单
			submitForm() {
				let _this = this;
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单
					_this.$api.request({
						method: 'put',
						url: `/admin/merchant/cash/handle/${_this.model.id}`,
						data: _this.postModel,
						successMsg: '审核结果已提交',
						beforeSend() {
							_this.loading = true;
						},
						success(res) {
							_this.$common.linkUrl('/merchant/cash/list');
						},
						complete() {
							_this.loading = false;
						}
					});
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>

<style lang="scss">
	.preview-box {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		width: 120px;
		height: 120px;
		overflow: hidden;
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
</style>